/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="icon-bg_wrap" :style="iconWrapStyle">
        <i class="iconfont icon-bg_icon" :class="icon" :style="iconStyle"></i>
    </div>
</template>

<style lang="less" scoped>
    .icon-bg_wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }

    .icon-bg_icon {

    }
</style>

<script>
    export default {

        props: {
            icon: {
                type: String,
                default: ''
            },
            defaultWidth: {
                type: Number,
                default: 30
            },
            size: {
                type: Number,
                default: 22
            },
            color: {
                type: String,
                default: '#FFF'
            },
            bg: {
                type: String,
                default: '#FFF'
            }
        },

        data () {
            return {

            };
        },

        computed: {
            iconWrapStyle () {
                let style = {};
                style.color = `${this.color}`;
                style.background = `${this.bg}`;
                style.width = `${this.defaultWidth}px`;
                style.height = `${this.defaultWidth}px`;
                return style
            },

            iconStyle () {
                let style = {};
                style.fontSize = `${this.size}px`;
                return style
            }

        }
    };
</script>
